<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>公告管理</title>
    <style>
        /* 样式与items.html相同 */
        .el-dialog {
            padding: 0 20px;
        }

        .add-btn {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            padding: 10px;
        }

        .content-header {
            position: relative;
            padding: 15px 15px 0 15px;
        }

        .content-header>h1 {
            margin: 0;
            font-size: 24px;
            font-weight: normal;
        }

        .content-header>h1>small {
            font-size: 15px;
            display: inline-block;
            padding-left: 4px;
            font-weight: 300;
        }

        .content-header>.breadcrumb {
            float: right;
            background: transparent;
            margin-top: 0;
            margin-bottom: 0;
            font-size: 12px;
            padding: 7px 5px;
            position: absolute;
            top: 20px;
            right: 10px;
            border-radius: 2px;
        }

        .app-container {
            background: #fff;
            margin: 15px 30px 15px 15px;
        }

        .box {
            position: relative;
            border-radius: 3px;
            background: #ffffff;
            border-top: 3px solid #3c8dbc;
            padding: 10px;
            margin-bottom: 20px;
            width: 100%;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        .filter-container {
            padding: 10px 0 15px 0;
        }

        .filter-container .el-button,
        .filter-container .el-input__inner {
            padding: 0 15px;
            height: 34px;
            line-height: 34px;
        }
    </style>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>

<body>
<div id="app">
    <div class="content-header">
        <h1>网站管理<small>公告管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>网站管理</el-breadcrumb-item>
            <el-breadcrumb-item>公告管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input placeholder="公告" v-model="pagination.content" style="width: 200px;"
                          class="filter-item"></el-input>
                <el-button @click="findSearchPage()" class="dalfBut">查询</el-button>
            </div>
            <div class="add-btn">
                <el-button type="primary" size="small" @click="beginAdd">新增公告</el-button>
                <el-pagination v-show="total > pageSize" @current-change="query" :current-page="lastPage"
                               style="margin-top: 5px" background :page-size="pageSize" :page-sizes="pageSizes"
                               @size-change="handleSizeChange" layout="prev, pager, next, total, sizes" :total="total">
                </el-pagination>
            </div>
            <el-table :data="orders" border size="small" current-row-key="order_id" stripe highlight-current-row>
                <el-table-column v-for="h in headers" :key="h.prop" :prop="h.prop" :label="h.text" :width="h.width"
                                 :align="h.align">
                </el-table-column>
                <el-table-column align="center" label="操作" :width="160">
                    <template slot-scope="scope">
                        <el-button type="primary" plain icon="el-icon-edit" circle size="mini"
                                   @click="handleEdit(scope.$index, scope.row)"></el-button>
                        <el-button type="danger" plain icon="el-icon-delete" circle size="mini"
                                   @click="handleDelete(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="公告信息" :visible.sync="formVisible" width="50%" style="padding: 0 20px;">
                <el-form :model="order" size="small" label-position="left" :label-width="formLabelWidth">
                    <el-form-item label="公告内容">
                        <el-input type="textarea" v-model="order.content" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="formVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveOrUpdate">发布公告</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>

<script>
    axios.defaults.baseURL = "";
    axios.interceptors.request.use(
        config => {
            config.headers['authorization'] = 'admin'
            return config
        },
        error => {
            console.log(error)
            Promise.reject(error)
        }
    )

    const app = new Vue({
        el: "#app",
        data: {
            pagination: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                content: null,
                pageNo: 1
            },
            pageSize: 5,
            pageSizes: [5, 10, 20, 50, 100, 200],
            headers: [
                { prop: "id", text: "公告id", width: 120, align: "center" },
                { prop: "content", text: "内容", width: null, align: "center" },
                { prop: "createdAt", text: "创建时间", width: 100, align: "center" }
            ],
            orders: [],
            total: 1000,
            formVisible: false,
            formLabelWidth: "100px",
            order: {
                content: ''
            },
            isEdit: false,
            lastPage: 1,
            searchList: []
        },
        created() {
            this.query()
        },
        watch: {
            pageSize() {
                this.query(1);
            }
        },
        methods: {
            findSearchPage() {
                this.lastPage = 1;
                this.query();
            },
            handleSizeChange(s) {
                this.pageSize = s;
            },
            query(page) {
                this.lastPage = page;
                axios.get("/announcement/page", {
                    params: {
                        pageNo: this.lastPage ? this.lastPage : 1,
                        pageSize: this.pageSize,
                        content: this.pagination.content
                    }
                })
                    .then(resp => {
                        this.orders = resp.data.records;
                        this.total = parseInt(resp.data.total);
                    })
                    .catch(err => {
                        console.log(err)
                    });
            },
            handleEdit(v1, v2) {
                this.isEdit = true;
                this.order = JSON.parse(JSON.stringify(v2));
                this.formVisible = true;
            },
            handleDelete(v1, v2) {
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteById(v2.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            async saveOrUpdate() {
                const data = new FormData()
                for (const key in this.order) {
                    if (key == 'createdAt' || key == 'updatedAt') {
                        continue
                    }
                    data.append(key, this.order[key])
                }
                const res = await axios.post("/announcement/saveOrUpdate", data)
                const { code, msg } = res.data
                if (code !== 200) {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                    return
                }
                this.$message({
                    message: '操作成功',
                    type: 'success'
                });
                this.formVisible = false
                this.query()
            },
            beginAdd() {
                this.isEdit = false;
                this.item = {};
                this.formVisible = true;
            },
            deleteById(id) {
                axios.get("/announcement/delete",{params: {id: id}})
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.reload();
                    })
                    .catch(err => {
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                        console.log(err);
                    })
            },
            reload() {
                this.query(this.lastPage);
            }
        }
    })
</script>
</body>

</html>